import React, { Suspense } from "react";
import { Card, Tabs, Icon } from "antd";
import { connect } from "dva";
import styles from "./hotQuestion.less";
import robotDataClass from "./robotDataClass";

import baseImg from "@/assets/chatGPT/guessLabel.png"

const { TabPane } = Tabs;

class HotQuestion extends React.Component {
	state = {
		type: '0',
		page: 1,
	}

	componentDidMount() {
		// this.getLabel()
	}

	getLabel = () => {
		const { robotId } = this.state;
		robotDataClass.getLabel(robotId, res => {
			console.log(res);
		})
	}

	getQuestionList = (item, index) => {

	}

	sendContent = question => {
		this.props.sendContent(question)
	}

	changeNext = qaList => {
		let { page } = this.state;
		page = page >= Math.ceil(qaList.length / 5) ? 1 : (page + 1);
		this.setState({ page });
	}

	changeTab = key => {
		this.setState({ type: key });
	};

	render() {
		const { hotQaListWeb } = this.props;
		const { type, page } = this.state;

		return (
			<Card bordered={false} className={styles["hotQuestion"]}>
				<Tabs activeKey={type} onChange={this.changeTab} style={{ width: '450px', height: '256px' }}>
					{hotQaListWeb && hotQaListWeb.length > 0 ? hotQaListWeb.map((item, index) => (
						<TabPane tab={item.name} key={index}>
							<div className={styles["clearfix"]}>
								<div className={styles["guessleft"]}>
									<div className={styles["leftTitleTop"]}>
										<img src={item.imgUrl ? `${fileUrl + item.imgUrl}` : baseImg} width="48" />
									</div>
									{item.qaList && item.qaList.length > 5 ? (
										<div className={styles["leftTitleBottom"]} onClick={() => this.changeNext(item.qaList)}>
											<div className={styles["changeImg"]}></div>
											<span>换一批</span>
										</div>
									) : null}
								</div>
								<div className={styles["guessRight"]}>
									{item.qaList && item.qaList.length > 0 ? (
										<ul className={styles["knowledgeUl"]}>
											{item.qaList.slice((page-1)*5, (page-1)*5+5).map((know, index) => {
												return (
													<li
														key={index}
														onClick={() => this.sendContent(know.question)}
														style={index === item.qaList.slice((page-1)*5, (page-1)*5+5).length - 1 ? null : { borderBottom: '1px solid #EEEEEE' }}
													>
														<span className={styles["round"]}></span>
														<span className={styles["knowledgeLi"]}>
															<span>{know.question}</span>
															<Icon type="right" style={{ color: '#0000004D', fontSize: '14px' }} />
														</span>
													</li>
												)
											})}
										</ul>
									) : null}
								</div>
							</div>
						</TabPane>
					)) : null}
				</Tabs>
			</Card >
		);
	}
}

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(HotQuestion);
